@import "../../style/public";
.getMoneyQrCode {
  .QrCode-list {
    background: #fff;
    @include remCalc(margin-top, 30);

    li {
      @include thin-border(false, false, bottom);
      @include remCalc(margin-left, 30);

      &:last-child {
        &::after {
          display: none;
        }
      }
      .wrap {
        display: flex;
        @include remCalc(font-size, 30);
        @include remCalc(height, 90);
        @include remCalc(line-height, 90);
        @include remCalc(padding-right, 30);
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;

        >span {
          color: #333;
        }

        >div {
          flex: 1;
          color: #c7c7cc;
          text-align: right;

          i {}
        }
      }
    }
  }
}

.qrCodeList {
  .shop-name {
    width: pw(355);
    line-height: pw(48);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: pw(10);
    margin-bottom: pw(10);
    border-radius: pw(10);
    background-color: white;
    font-size: pw(14);
    // @include remCalc(font-size, 28);
    color: #000000;
    // @include remCalc(padding, 16, 30);
  }

  .qrCode-list {
    display: flex;
    flex-direction: column;
    align-items: center;

    li {
      width: pw(355);
      @include remCalc(margin-bottom, 20);
      background: #fff;
      // @include thin-border(true, false);
      border-radius: pw(10);

      .info {
        display: flex;
        width: pw(335);
        margin-left: auto;
        margin-right: auto;
        @include thin-border(false, false, bottom);
        position: relative;

        .left {
          .logo {
            width: pw(70);
            height: pw(70);
            background-color: #F3F3F3;
            // @include remCalc(width, 120);
            // @include remCalc(height, 120);
            @include remCalc(margin, 20, 20, 20, 30);
            border: 1px solid #ddd;
            border-radius: pw(10);

            background: url(../../../static/images/getmoneycodelist.png) 0 0 no-repeat;
            background-size: cover;

            .type {
              width: pw(64);
              height: pw(24);
              line-height: pw(24);
              text-align: center;
              border-radius: pw(12) 0 0 pw(12);
              position: absolute;
              display: inline-block;
              @include remCalc(font-size, 25);
              // @include remCalc(line-height, 30);
              @include remCalc(padding, 2, 10);
              @include remCalc(right, -17);
              @include remCalc(top, 16);
              // @include remCalc(border-radius, 4);
              background: #ee3a31;
              color: #fff;

              &.miniApp {
                background: $color-red;
              }
            }
          }
        }

        .right {
          line-height: 1.1;

          .name {
            @include remCalc(margin, 20, 0, 22, 0);
            @include remCalc(font-size, 32);
            color: #333;
          }
          .codeId {
            @include remCalc(font-size, 28);
            @include remCalc(margin, 0, 0, 10, 0);
            color: #999;
          }
          .cashier {
            @include remCalc(font-size, 24);
            @include remCalc(margin-bottom, 10);
            color: #999;
          }
        }
      }

      .ope-list {
    
        display: flex;
        justify-content: flex-end;
        padding: pw(10) 0 pw(10) 0;

        >div {
          // flex: 1;
          text-align: center;
          @include remCalc(font-size, 32);
          @include remCalc(line-height, 88);
          color: $color-red;
          width: pw(100);
          line-height: pw(32);
          margin-right: pw(10);
          border: 1px solid #FF211A;
          border-radius: pw(50);

          &.disabled {
            color: #ddd;
          }

          // &:first-child {
          //   border-right: 1px solid #eee;
          // }
        }
      }
    }
  }
}
.editQrCode {
  .code-type {
    @include remCalc(font-size, 28);
    color: #999;
    @include remCalc(line-height, 70);
    @include remCalc(padding-left, 30);
  }

  .ope-list {
    width: pw(355);
    // @include thin-border(true, false);
    background: #fff;
    margin-left: pw(10);
    margin-top: pw(10);
    border-radius: pw(10);
    li {
      display: flex;
      @include remCalc(padding-right, 30);
      @include remCalc(font-size, 32);
      @include remCalc(line-height, 88);
      color: #333;
      @include thin-border(false, false, top);
      &:first-child {
        &::after {
          display: none;
        }
      }

      &.readOnly {
        div{
          color: #ddd;
        }
       
      }

      >span {
        margin-left: pw(10);
      }

      >div {
        flex: 1;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        i {
          color: #ccc;
        }
      }
    }
  }
  .explainText {
    color: #999;
    @include remCalc(font-size, 24);
    @include remCalc(padding, 20, 30);
    @include remCalc(line-height, 50);
  }

  .set-money-list {
    background: #fff;
    width: pw(355);
    border-radius: pw(10);
    margin-left: pw(10);

    li {
      display: flex;
      align-items: center;
      @include thin-border(true, false);

      .inputContent {
        flex: 1;
        @include remCalc(padding, 0, 30);

        .inputItem {
          display: flex;
          align-items: center;
          color: #333;
          @include thin-border(false, false, bottom);
          @include remCalc(line-height, 88);
          @include remCalc(font-size, 32);
          &:last-child {
            &::after {
              display: none;
            }
          }

          >span {
            @include remCalc(padding-right, 20);
          }

          >div {
            flex: 1;
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            i {
              color: #ccc;
            }
          }
        }
      }

      i {
        @include remCalc(margin, 0, 30, 0, 20);
        color:rgba(245, 71, 34, 1);
      }
    }
  }

  .addButton {
    color: #FF211AFF;
    @include remCalc(font-size, 32);
    @include remCalc(border, 1, solid, #FF211AFF);
    @include remCalc(border-radius,36);
    @include remCalc(padding, 0, 56);
    @include remCalc(line-height, 60);
    @include remCalc(margin, 20, auto, 0, auto);
    @include remCalc(width, 100);
  }
  .addButtonDisabled {
    color: #999;
    @include remCalc(font-size, 32);
    @include remCalc(border, 1, solid, #ddd);
    @include remCalc(border-radius, 8);
    @include remCalc(padding, 0, 56);
    @include remCalc(line-height, 60);
    @include remCalc(margin, 20, auto, 0, auto);
    @include remCalc(width, 100);
  }

  .viewPreviewImg {
    text-align: center;
    @include remCalc(margin-top, 20);

    span {
      color: #459dff;
      @include remCalc(font-size, 24);
    }
  }

  .btn-wrap {
    background: linear-gradient(271.44deg, #F52222 0%, #D81212 100%);

    @include remCalc(margin-top, 60);
    .btn{
      background: linear-gradient(271.44deg, #F52222 0%, #D81212 100%);
    }
  }
}

.payMoney {
  .storeBox {
    display: flex;
    align-items: center;
    @include remCalc(height, 98);
    @include remCalc(line-height, 98);
    @include remCalc(padding, 0, 30);
    @include remCalc(margin, 20, 0, 0, 0);
    background: #fff;

    .storeName {
      flex: 1;
      display: flex;

      .imgBox {
        display: table-cell;
        vertical-align: middle;

        img {
          @include remCalc(width, 60);
          @include remCalc(height, 60);
          display: inline-block;
          @include remCalc(margin-right, 12);
          @include remCalc(padding-bottom, 4);
        }
      }
      p {
        color: #000;
        @include remCalc(font-size, 36);
        @include remCalc(width, 450);
        @extend %text-overflow;
      }
    }
    .addRemark {
      color: #459dff;
      @include remCalc(font-size, 28);
    }
  }
  .setMoneyList {
    li {
      display: flex;
      align-items: center;
      @include remCalc(padding, 0, 30);
      @include remCalc(height, 180);
      @include remCalc(margin-top, 20);
      background: #fff;

      .setMoneyContent {
        flex: 1;
        color: #333;

        p {
          @include remCalc(font-size, 28);

          &+p {
            @include remCalc(margin-top, 30);
          }
        }
      }
      .addSubtractFrame {
        text-align: right;
        display: flex;
        align-items: center;

        .num-box {
          display: flex;

          >i {
            display: inline-block;
            @include remCalc(font-size, 64);

            &.disabledClass {
              color: #ddd;
            }
          }
          .buy-num {
            color: #ccc;
            text-align: center;
            box-sizing: border-box;
            @include remCalc(height, 64);
            @include remCalc(line-height, 64);
            @include remCalc(padding, 0, 20);
            @include remCalc(font-size, 28);
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            // @include remCalc(border-top, 1, solid, #ddd);
            // @include remCalc(border-bottom, 1, solid, #ddd);
          }
        }
      }
    }
  }
  .kxf {
    display: flex;
    @include remCalc(height, 60);
    @include remCalc(line-height, 60);
    justify-content: center;
    text-align: center;
    @include thin-border(false, false, top);

    >div {
      img {
        @include remCalc(width, 83);
        @include remCalc(height, 26);
        @include remCalc(padding-bottom, 4);
        display: inline-block;
        vertical-align: middle;
      }
    }
    span {
      color: #a2a2a2;
      @include remCalc(font-size, 24);
      vertical-align: middle;
    }
  }
}
.van-switch {
  
  @include remCalc(font-size, 43);
}
